<template>
	<div class="data-page">
		<dheader></dheader>
		<topnav></topnav>
		<div class="data-content">
			<div class="data-time">
				 温馨提示: 后续还会继续加功能，请关注我github更新...
			</div>
			<div class="data-main">
				<div class="main-left">
				  <dleft :personalData="personalData" :username="username"></dleft>
				</div>
				<div class="main-center">
					<dcontent :numberData="numberData" :username="username"></dcontent>
				</div>
				<div class="main-right">
					<dright :username="username"></dright>
				</div>
			</div>
		</div>
		<nouser :isShow="isShow"  v-if="isShow"></nouser>
		<loading v-if="pageShow"></loading>
	</div>
</template>

<script>
import dheader from './dheader'
import dleft from './dleft'
import dcontent from './dcontent'
import dright from './dright'
export default {
  components:{
  	dheader,
  	dleft,
  	dcontent,
  	dright
  },
  data(){
  	return{
  		isShow:false,
  		pageShow:true,
  		personalData:{},
  		numberData:{},
  		username:""
  	}
  },
  created(){
  	let username = this.$route.params.user
    this.getData(username)
  },
  methods:{
  	getData(username){ 
  		let self = this
        this.$axios.get('/api/users/'+ username).then((response)=>{
            let res = JSON.parse(JSON.stringify(response))
            if(res.status === 200){
            	this.username = username
          	    let data = res.data
          	    //个人图片、加入github时间
          	    let sinceDate = data.created_at
          	    let joinDate = sinceDate.substring(0,10)
          	    let img   = data.avatar_url
          	    let objP  = {
          	    	username: username,
          	    	joinDate: joinDate,
          	    	img: img
          	    }
          	    this.personalData = objP
          	    
          	    //仓库数、粉丝数、跟随数
          	    let pubRepos = data.public_repos
          	    let followers = data.followers
          	    let following = data.following
          	    let objN  = {
          	    	pubRepos: pubRepos,
          	    	followers: followers,
          	    	following: following
          	    }
          	    this.numberData = objN
          	    
          	    this.pageShow = false
			    }   
			   
			return
              
		    }).catch(err => {
		    	this.pageShow = false
		    	this.isShow = true
				console.log(err.message);
			})
  	}
  	//计算年月
//	joindate(sinceDate){
//      var since = sinceDate.getFullYear();
//      var sinceMonth = sinceDate.getMonth();
//      return since + "-" + sinceMonth
//	}
  }
}
</script>

<style lang="scss">
.data-page{
	background: url(../../assets/data/true.png) repeat-x;
	top: 0;
	right: 0;
	right: 0;
	bottom: 0;
	height: 100%;
    min-width: 1220px;
	.data-content {
	    padding-top: 20px;
	    padding-bottom: 20px;
	   .data-time {
		    width: 340px;
		    height: 35px;
		    background-color: #2C58A6;
		    line-height: 35px;
		    color: #fff;
		    font-size: 12.8px;
		    margin-bottom: 25px;
		    margin-left: 20px;
		    text-align: center;
		}
		.data-main {
		    width: calc(100% - 40px);
		    margin-bottom: 40px;
		    margin-left: 20px;
		    height: 720px;
		    
		    
		    .main-left{
		    	width: 24%;
		    	float: left;
		    }
		     .main-center{
		    	float: left;
		    	width: 52%;
		    	padding: 0 20px 0 20px;
		    	
		    }
		     .main-right{
		     	float: left;
		    	width: 24%;
		    	 height: 615px;
		    }
		}
	}		
}

</style>